<template>
  <div class="freight-city">
    <tag tag="偏远地区运费" />
    <template v-if="+detail.freight > 0 && detail.expressCity && detail.expressCity.length > 0">
      <p class="area">
        <span class="text">偏远地区:</span>
        <span class="list">{{ detail.expressCity.join(', ') }}</span>
      </p>
      <p class="total">需要增加: <span>￥{{+detail.freight}}</span>元运费</p>
    </template>
    <template v-else>
      <p class="area" v-if="false">(免运费) 全国包邮 内蒙 新疆 西藏均可参与</p>
    </template>
  </div>
</template>

<script>
import Tag from './Tag'
export default {
  name: 'DetailFreight',
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: { Tag }
}
</script>

<style scoped lang="stylus">
.freight-city
  margin 10px
  padding 10px
  background white
  border-radius 10px
  text-align left
  p
    //height 20px
    line-height 22px
    &.area
      .text
        color $main_text_color
      .list
        color $second_text_color
    &.total
      span
        color red
</style>
